import { Form, Select, Button, Input, Upload } from "antd";
import "./index.scss";
import type { FormProps, UploadFile } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import AV from "leancloud-storage";
import { useState } from "react";
function SubjectAdd() {
	type FieldType = {
		type?: string;
		title?: string;
		detail?: string;
		imgSrc?: string;
	};
	const [imageUrl, setImageUrl] = useState<string>("");
	const [loading, setLoading] = useState(false);
	const uploadButton = (
		<button style={{ border: 0, background: "none" }} type="button">
			{loading ? <LoadingOutlined /> : <PlusOutlined />}
			<div style={{ marginTop: 8 }}>上传图片</div>
		</button>
	);
	const handleChange = (value: any) => {
		console.log(`selected ${value}`);
	};
	const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
		console.log("Success:", values);
	};
	const onChange = (info: any) => {
		if (info.fileList.length) {
			const file = new AV.File("avatar.jpg", info.file);
			file.save().then(
				(file: any) => {
					console.log(`文件保存完成。URL`, file.url());
					setImageUrl(file.url());
				},
				(error) => {
					console.log(error, "error");
				}
			);
		}
	};
	const beforeUpload = (file: UploadFile) => {
		return false;
	};
	const onRemove = (file: UploadFile) => {
		setImageUrl("");
	};
	return (
		<div className="subjectAdd_wrap">
			<div className="subjectAdd_wrap_title">
				<div className="subjectAdd_wrap_title_name">基础-网络基础</div>
				<div className="subjectAdd_wrap_title_form">
					<Form layout="inline" onFinish={onFinish}>
						<Form.Item<FieldType>
							name="type"
							rules={[{ required: true, message: "请选择题目类型!" }]}
						>
							<Select
								placeholder="请选择考试类型"
								style={{ width: 180 }}
								onChange={handleChange}
								options={[
									{ value: "jack", label: "Jack" },
									{ value: "lucy", label: "Lucy" },
									{ value: "Yiminghe", label: "yiminghe" },
								]}
							/>
						</Form.Item>

						<Form.Item>
							<Button type="primary">新增题目</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
			<div className="subjectAdd_wrap_main">
				<div className="subjectAdd_wrap_main_title">
					<div className="subjectAdd_wrap_main_title_item">
						<div className="subjectAdd_wrap_main_title_item_name">
							1.3+2+"1"的结果是什么?
						</div>
						<div className="subjectAdd_wrap_main_title_item_btn">删除</div>
					</div>
					<div className="subjectAdd_wrap_main_title_item">
						<div className="subjectAdd_wrap_main_title_item_name">
							1.3+2+"1"的结果是什么?
						</div>
						<div className="subjectAdd_wrap_main_title_item_btn">删除</div>
					</div>
				</div>
				<div className="subjectAdd_wrap_main_detail">
					<div className="subjectAdd_wrap_main_detail_title">题目详情</div>
					<div className="subjectAdd_wrap_main_detail_form">
						<Form onFinish={onFinish}>
							<Form.Item<FieldType>
								name="title"
								label="题干"
								labelCol={{ span: 2 }}
								wrapperCol={{ span: 22 }}
								rules={[{ required: true, message: "请输入题干!" }]}
							>
								<Input placeholder="请输入题干" />
							</Form.Item>

							<Form.Item<FieldType>
								label="描述"
								name="detail"
								labelCol={{ span: 2 }}
								wrapperCol={{ span: 22 }}
								rules={[{ required: true, message: "请输入题目描述!" }]}
							>
								<Input.TextArea
									placeholder="请输入题目描述"
									style={{ height: 100, resize: "none" }}
								/>
							</Form.Item>
							<Form.Item<FieldType>
								label="图片"
								name="imgSrc"
								labelCol={{ span: 2 }}
								wrapperCol={{ span: 22 }}
							>
								<Upload
									listType="picture-card"
									className="avatar-uploader"
									maxCount={1}
									onChange={onChange}
									beforeUpload={beforeUpload}
									onRemove={onRemove}
								>
									{imageUrl ? null : uploadButton}
								</Upload>
							</Form.Item>
							<Form.Item wrapperCol={{ offset: 2, span: 22 }}>
								<Button type="primary" htmlType="submit">
									保存题目
								</Button>
							</Form.Item>
						</Form>
					</div>
				</div>
			</div>
		</div>
	);
}

export default SubjectAdd;
